import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    Text,
    TouchableOpacity,
    Image
} from 'react-native';

import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';
import HttpUtil from '../util/HttpUtil';
import AssetInitCard from './AssetInitCard';
import ProjectNameTree from '../component/ProjectNameTree'

export default class AssetInit extends Component {

    constructor(props){
        super(props);
        this.state = {
            count: 0,
            showProjectNameModal:false,
            projectNameList:[],
            selectProjectId:'',
            projectName:'全部',
        }
    }

    componentDidMount(){
        this.init();
    }

    init = () => {
        HttpUtil.post('getBuyProjectList', null)
        .then(result => {         
            if(result.httpCode == 200){
                if(result.data&&result.data.length>0){
                    result.data.unshift({id:'',name:"全部"});
                    this.setState({
                        projectNameList: result.data,
                    });
                }else{
                    this.setState({
                        projectNameList:[ {id:'',name:"全部"}]
                    });
                }
                baseFlag = true;
                if(baseFlag && dataFlag){
                    RRCLoading.hide();
                }
            }else{
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            }
        })
        .catch(error => {
            RRCLoading.hide();
            RRCToast.show('系统异常', 1, 3000);
        })
    }

    setCount = (val) =>{
        this.setState({
            count: val,
        })
    }

    openProjectNameModal = () => {
        this.setState({
            showProjectNameModal: true,
        });
    }
    closeProjectNameModal =()=>{
        this.setState({
            showProjectNameModal: false,
        });
    }

    selectProjectName = (project)=>{
        //console.log(project)
        this.setState({
            selectProjectId:project.id,
            projectName:project.name,
            showProjectNameModal:false,
        });
        // DeviceEventEmitter.emit('searchSubmit',this.props.navigation.state.params.keyWord);
        this.refs.AssetInitCard.changeProjectNameParam(project.id);
        this.refs.AssetInitCard.fetchData(1,this.props.navigation.state.params.code,this.props.navigation.state.params.keyWord);
    }
    
    render() {
        return (
            <View>
                <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                    <Text style={ styles.selectLable }>购置项目</Text>
                    <TouchableOpacity onPress={this.openProjectNameModal.bind(this)}>
                        <Text style={ styles.selectValue }>{ this.state.projectName }</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.openProjectNameModal.bind(this)}>
                            <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                    </TouchableOpacity>
                </View>
                <Text style={{ height:getPixel(40), lineHeight:getPixel(40), paddingLeft:getPixel(15), color: '#999', fontSize: getPixel(15) }}>待绑定: {this.state.count}</Text>
                <AssetInitCard ref="AssetInitCard" navigation={ this.props.navigation }  setCount={this.setCount} />
                <ProjectNameTree treeData= {this.state.projectNameList} isVisible = { this.state.showProjectNameModal } closeModal={ this.closeProjectNameModal } selectNode={ this.selectProjectName } onRequestClose={ this.closeProjectNameModal }/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    formGroup: {
        width:getScreenWidth(),
        flexDirection: 'row',
        alignItems: 'center',
        height: getPixel(50),
        backgroundColor: '#FFF',
        paddingLeft: getPixel(15),
        paddingRight: getPixel(15),
        position:'relative',
    },
    selectLable: {
        fontSize: getPixel(15),
        width: getPixel(90),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    selectValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(135),
    },
    selectIcon: {
        width: getPixel(25),
        alignItems: 'center',
    },
});